<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<body>
<!--在最外层设置固定宽度，内部可以使用百分比，这样页面缩写会出现滚动条，而页面不变形-->

<div class="pg-header">
    <div style="width: 980px">  <!--在最外层设置固定宽度-->
        头部数据
    </div>
</div>

<div class="pg-body">
    <div style="width: 980px">  <!--在最外层设置固定宽度-->
        中间内容
    </div>
</div>

<div class="pg-footer">
    <div style="width: 980px">  <!--在最外层设置固定宽度-->
        底部菜单
    </div>
</div>

</body>
</html>